<!-- （地灾）雨量预警 -->
<template>
  <div>
   
    <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
      <span style="margin-right: 20px; font-weight: bold;">精准靶向服务产品</span>
      <span style="margin-right: 20px;">|</span>
  <span style="display: flex; align-items: center;">
    <span>地灾雨量预警</span>
  </span>
    </div>


    <div style="padding: 10px; color: #fff; display: flex; align-items: center;">
      <span class="label">从</span>
            <el-date-picker
               class="el-date-picker"
                format="yyyy-MM-dd HH:mm:ss"
                v-model="value1"
                type="datetime"
                placeholder="选择开始日期时间">
            </el-date-picker>
            <span class="label">到</span>
            <el-date-picker
                class="el-date-picker"
                format="yyyy-MM-dd HH:mm:ss"
                v-model="value2"
                type="datetime"
                placeholder="选择结束日期时间"
                style="margin-right: 20px;">
            </el-date-picker>
            <el-select v-model="region" placeholder="选择区域" class="custom-select">
                <el-option
                    v-for="town in uniqueTowns"
                    :key="town"
                    :label="town"
                    :value="town">
                </el-option>
            </el-select>

            <el-select v-model="category" placeholder="选择类别" class="custom-select" style="margin-left: 20px;">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="在建工程" value="在建工程"></el-option>
                <el-option label="旅游景点" value="旅游景点"></el-option>
                <el-option label="非煤矿山" value="非煤矿山"></el-option>
                <el-option label="工业企业" value="工业企业"></el-option>
                <el-option label="其他" value="其他"></el-option>
            </el-select>
            <el-button type="primary" @click="confirmSelection" style="margin-left: 20px;">确定</el-button>


            <div class="send-count" style="margin-left: 20px;">
            发送人数: {{ sendCount }}
        </div>
    </div>


    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :row-style="rowStyle"
      v-if="sendCount > 0 && tableData.length > 0" 
    >
    <el-table-column prop="name" label="姓名" width="100"></el-table-column>
            <el-table-column prop="tel" label="号码" width="160"></el-table-column>
            <el-table-column prop="county" label="县区" width="100"></el-table-column>
            <el-table-column prop="town" label="乡镇" width="150"></el-table-column>
            <el-table-column prop="village" label="村" width="150"></el-table-column>
            <el-table-column prop="type" label="种类" width="120"></el-table-column>
            <el-table-column prop="sgroup" label="行业" width="120"></el-table-column>
            <el-table-column prop="sendTime" label="发送时间"  width="150"></el-table-column>
            <el-table-column prop="content" label="内容">
              <template #default="{ row }">
          <el-popover trigger="hover" width="500" placement="top" :content= "row.content">
            <div slot="reference" style="cursor: pointer;">
              {{ row.content.length > 25 ? row.content.slice(0, 25) + '...' : row.content }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
import Cookies from 'js-cookie';
import Request from "@/utils/request";

export default {
    data() {
        return {
            county:Cookies.get('county'),
            value1: '2021-01-01 00:00:00',
            value2: this.formatDateTime(new Date()),
            region: '全部',
            category: '全部',
            sendCount: 0,
            tableData: [],
            dialogVisible: false,
            dialogData: {}
        };
    },
    mounted(){
       this.confirmSelection()
    },
    computed: {
        uniqueTowns() {
            const towns = this.tableData.map(item => item.town);
            return ['全部', ...new Set(towns)];
        }
    },
    watch: {
        region() {
            this.confirmSelection();
        }
    },
    methods: {

        async confirmSelection() {
            try {
                const type = this.category === '全部' ? null : this.category;
                const county = this.region === '全部' ? null : this.region;
                const response = await Request.post('/precisetarget/rainfallWarningStatistics', {
                    pageQuery: {
                        pageSize: 99999,
                        pageNum: 1
                    },
                    county: county,
                    end: this.value2 ? this.formatDateTime(this.value2) : this.formatDateTime(new Date()),
                    type: type,
                    begin: this.value1 ? this.formatDateTime(this.value1) : '2021-01-01 00:00:00',
                    diseaterClass:'地质灾害',
                    isTravel:false,
                });
                if (response.data && response.data.data) {
                    this.sendCount = response.data.data.total || 0;
                    this.tableData = response.data.data.records || [];
                } else {
                    this.sendCount = 0;
                    this.tableData = [];
                }
            } catch (error) {
                console.error('Error fetching data:', error);
                this.sendCount = 0;
                this.tableData = [];
            }
        },
        formatDateTime(value) {
            const date = new Date(value);
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2);
            const day = ('0' + date.getDate()).slice(-2);
            const hours = ('0' + date.getHours()).slice(-2);
            const minutes = ('0' + date.getMinutes()).slice(-2);
            const seconds = ('0' + date.getSeconds()).slice(-2);
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        headerCellStyle() {
      return {
        background: '#0c2340',
        color: '#fff',
      };
    },
    cellStyle() {
      return {
        background: '#05152e',
        color: '#fff',
      };
    },
    rowStyle() {
      return {
        height: '30px',
      };
    },
    }
};
</script>
  
  <style  lang="less">

.custom-select .el-input__inner {
    background-color: rgb(36, 54, 101);
    color: white; 
    font-weight: bold;
    border: 2px solid #fff;
}
.el-date-picker .el-input__inner{
    background-color: rgb(36, 54, 101);
    color: white; 
    font-weight: bold;
    border: 2px solid #fff;
}
.custom-pagination{
  margin-top:20px;
  
}
.content-cell {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer; 
}




  </style>
  